<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>	
			section {
				width: 80%;
				height: 80px;
				border: 1px solid #000;
				margin: 100px auto;
				display: flex;
				/* flex-direction: column ; */
				/* min-width: 600px; */
				max-width: 900px;/* 限定宽度 */
				/* justify-content: center; */
				/* justify-content: space-between; */
				/* justify-content: space-around; */
				/* align-items: center; */
					flex-flow: row wrap;
				align-content: center;
			

			}
			div.box1 {
				/* height: 100%; */
				background-color: pink;
				/* flex: 2; */
				width: 700px;
				/* height: 20px; */
			}
			div.box2 {
				/* flex: 1; */
				background-color: red;
				width: 400px;
			}
			div.box3 {
				background-color: skyblue;
				/* flex: 1; */
				width: 100px;
			}

        </style>
    </head>
    <body>
    <section>
    	<div class="box1">1</div>
    	<div class="box2">2</div>
    	<div class="box3">3</div>
    </section>
    </body>
</html>